<template>
  <el-dialog
      title="Check-in"
      @open="open"
      @close="close"
      :visible.sync="dialogVisible">
    <div>
      <div class="check-in" v-loading="loading">
        <div class="check-in-header">
          <div>{{ currentRow.kpi }}</div>
          <div> <span style="margin-right: 20px">Timezone: {{ $store.state.user.timezoneId }}</span> Benchmark: {{ currentRow.benchMark }}</div>
        </div>
        <RecycleScroller
            ref="test"
            class="test"
            :items="list"
            :item-size="43"
            key-field="id"
            v-slot="{ item }">
          <div class="check-in-item">
            <div class="number"> <i class="y"></i> <score-card-new-value :value="item.names" :item="item" @success="success"></score-card-new-value></div>
            <div v-if="item.gadgetId">{{ item.date | formatDate(format) }}</div>
            <div v-else>{{ item.date | transformTimeZone(format) }}</div>
          </div>
        </RecycleScroller>
      </div>
      <div class="check-in-history-box">
        <div class="check-in-history">
          <div class="show-history" @click="showHistory=!showHistory"> <i :class="{'showHistory': showHistory}" class="el-icon-arrow-up" /> Check in History</div>
          <div  class="check-in-history-list"  v-if="showHistory">
            <div class="check-in-history-list-item" v-for="item in historyList" v-if="item.aftUpdate">
              <i class="y"></i>
              <div class="right">
                <div class="contant">
                  <div><strong>{{ Object.values(item.aftUpdate[0])[0] }}</strong> <strong>{{item.creatorName}}</strong> checked in on {{ item.createDate | transformTimeZone }}</div>
                  <div>{{ item.syncTime | transformTimeZone(format) }}</div>
                  </div>

                  <div v-html="item.comment.replace(/\n/g, '<br>')"></div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import scoreCardNewValue from "@/components/score-card-table/score-card-new-value.vue";
export default {
  name: "score-card-check-in",
  props: ['visible', 'currentRow', 'currentColumn', 'format'],
  components: {
    scoreCardNewValue
  },
  data () {
    return {
      loading: false,
      showHistory: false,
      historyList: [],
      change:false,
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    list () {
      return this.currentRow.Indicators || []
    }
  },
  methods: {
    commentData(val){
     
    },
    open () {
      this.loading = true
      this.showHistory=false
      this.getHistory();
      this.$nextTick(() => {
        const index = this._.findIndex(this.currentRow.Indicators, { date: this.currentColumn.property});
        setTimeout(() => {
          this.$refs.test.scrollToItem(index)
          this.loading = false
        }, 1000)
      })
    },
    async getHistory () {
      const params = {
        gadgetId: this.currentRow.id,
      }
      const { getSnapshotUpdateHistory } = this.$interface.reports
      const { data } = await getSnapshotUpdateHistory(params)
      this.historyList = data.data.records
    },
    success (data) {
      if (data) {
        if (this.currentRow.Indicators[0].gadgetId) {
          this.currentRow.Indicators[0].id = data.id
          delete this.currentRow.Indicators[0].gadgetId
        }
      }
      this.getHistory();
      this.change = true
    },
    close() {
      if (this.change) {
        this.$emit('change')
      }
    },
  }
}
</script>

<style scoped lang="scss">
.test {
  max-height: 400px;
}
.check-in {
  background: #FFFFFFB2;
  border-radius: 4px;
  border: 1px solid #0000000F;
  margin: 0 20px;
  .check-in-item,.check-in-header {
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 42px;
    border-bottom: 1px solid #00000014;
    .number {
      display: flex;
      align-items: center
    }
    .y {
      display: inline-block;
      background: #DA1E28FF;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 8px;
    }
  }
  .check-in-header {
    background: #EEEEEE;
    font-weight: bold;
  }
}
::v-deep .el-dialog__body {
  background: #F9F9F9;
  padding: 20px 0 0 0;
}
.check-in-history-box {
  background: #fff;
  padding: 0 20px 20px;
  margin-top: 26px;
}

.check-in-history {
  position: relative;
  padding-top: 26px;
  .show-history {
    position: absolute;
    line-height: 28px;
    width: 147px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0000000F;
    cursor: pointer;
    i {
      margin-right: 8px;
      transform: rotate(0);
      transition: all .3s ease-out;
    }
    .showHistory {
      transform: rotate(-180deg);
    }
  }
  &-list {
    border-radius: 4px;
    height: 200px;
    transition: max-height .3s ease-out;
    overflow: auto;
    &-item {
      padding: 0 12px;
      display: flex;
      // line-height: 42px;
      // border-bottom: 1px solid #00000014;
      margin-bottom: 5px;
      .y {
      display: inline-block;
      background:#21ba45;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
      margin-top:2px;
    }
    .right {
      flex: 1;
      margin-left: 8px;
    }
      .contant {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 5px;
      }
    }
    //&-item:last-child {
    //  border-bottom: none;
    //}
  }
  .show-check-in-history {
    max-height: 200px;
    overflow: auto;
    // border: 1px solid #00000014;
  }
}
</style>